<template>
  <view class="works-select">
    <view class="works-type">
        <view class="works-classification">
            <cover-view class="overlay" :class="{ 'slide-right': isSlideRight }" style=" transition: transform 1s; ">
            <!-- 这里放置不占据空间的内容 -->
            </cover-view>
            <view class="classification"  @click="slideOverlay" :key="item.text" v-for="item in classifications">{{item.text}}({{item.number}})</view>
        </view>
        <view class="works-type-tip">
           <view class="share"> <fui-icon  color="#fff" :size="iconSize" name="partake"></fui-icon></view>
            <fui-icon  color="#fff" :size="iconSize" name="warning"></fui-icon>声明
        </view>
    </view>
    <view class="search-view">
        <fui-search-bar :background="background" :placeholder="placeholder" searchColor="#fff" cancelColor="#fff" @search="search"></fui-search-bar>
    </view>
    <view v-for="item in items">
        <Works :id="item.id.toString" :title="item.name" :info="item.content" :iamge="item.image" :url="item.url" :inUser="true" />
    </view>
  </view>
</template>

<script setup lang="ts">
import Works from "@/components/Works/Works.vue";
import playingStore from '@/store/playing';
const background = ref("#000")
const placeholder =ref("输入你想搜索的关键词")
const iconSize = ref(45)
const isSlideRight = ref(false)
const playing = playingStore()
const classifications = ref([
    {
        text:'作品',
        number:0
    }
    ,
    {
        text:'专辑',
        number:0
    }
])
const searchContent = ref("")
const items = computed(()=>{
    if(searchContent.value){
        return playing.playingList.filter(item => {
            return item.name.includes(searchContent.value);
        });
    }
    return playing.playingList
})
const search = (e:any)=>{
    searchContent.value = e.detail.value
}
const slideOverlay = ()=>{
    isSlideRight.value = !isSlideRight.value 
}
</script>

<style lang="scss" scoped>
.works-select{
    margin-top: 23rpx;
    .search-view{
        border: 4rpx solid #fff;
        border-radius: 20rpx;
        margin:23rpx 0;
    }
    .works-type{
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        margin: 18rpx 0;
        .works-type-tip{
            display: flex;
            align-items: center;
            .share{
                margin-right: 50rpx;
            }

        }
        .works-classification{
            display: flex;
            border-radius: 30rpx;
            background: #9c9999;
            padding:10rpx 0;
            color: white;
            position: relative; /* 添加相对定位 */
            .overlay{
                position: absolute; /* 绝对定位，覆盖在 works-classification 上方 */
                bottom: 0;
                left: 0;
                width: 200rpx;
                height: 50rpx;
                background: #6327d1;
                z-index: 10; 
                border-radius: 30rpx; 
                height: 100%;
            }
            .classification{
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 200rpx;
                z-index: 11; 
            }
            .slide-right {
                transform: translateX(100%); /* 将 overlay 向右移动100%宽度 */
            }

        }
    }
}
</style>
